
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Test 2 - audio.js</title>
    <style>
      p { clear: both; }
    </style>
    <script src="js/audio.min.js"></script>
    <script>
      audiojs.events.ready(function() {
        var audios = document.getElementsByTagName('audio');

        var a1 = audiojs.create(audios[0], {
          css: false,
          createPlayer: {
            markup: false,
            playPauseClass: 'play-pauseZ',
            
            progressClass: 'progressZ',
            loaderClass: 'loadedZ',
            durationClass: 'durationZ',
            playedClass: 'playedZ',
            errorMessageClass: 'error-messageZ',
            playingClass: 'playingZ',
            loadingClass: 'loadingZ',
            errorClass: 'errorZ'
          }
        });
      });
    </script>
  </head>
  <body>
    <h1>audiojs.create(element, settings)</h1>
    <p>Manual player markup & css</p>
    <style>
      .audiojsZ audio { position: absolute; left: -1px;  }
      .audiojsZ { width: 30px; height: 30px; background: #f00; overflow: hidden; font-family: monospace; font-size: 12px;
        -webkit-box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.3); -moz-box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.3);
        -o-box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.3); box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.3); border-radius: 15px;}
      .audiojsZ .play-pauseZ { width: 25px; height: 40px; padding: 4px 6px; margin: 0px; float: left; overflow: hidden; border-right: 1px solid #c00; }
      .audiojsZ p { display: none; width: 30px; height: 30px; margin: 0px; cursor: pointer; }
      .audiojsZ .playZ { display: block; }
      .audiojsZ .scrubberZ { position: relative; float: left; width: 280px; background: #fcc; height: 14px; margin: 10px; border-left: 0px; border-bottom: 0px; overflow: hidden; }
      .audiojsZ .progressZ { display:none;position: absolute; top: 0px; left: 0px; height: 14px; width: 0px; background: #600; z-index: 1; }
      .audiojsZ .loadedZ { position: absolute; top: 0px; left: 0px; height: 14px; width: 0px; background: #c00; }
      .audiojsZ .timeZ { float: left; height: 36px; line-height: 36px; margin: 0px 0px 0px 6px; padding: 0px 6px 0px 12px; border-left: 1px solid #c00; color: #600; text-shadow: 1px 1px 0px rgba(125, 0, 0, 0.5); }
      .audiojsZ .timeZ em { padding: 0px 2px 0px 0px; color: #fcc; font-style: normal; }
      .audiojsZ .timeZ strong { padding: 0px 0px 0px 2px; font-weight: normal; }
      .audiojsZ .error-messageZ { float: left; display: none; margin: 0px 10px; height: 36px; width: 400px; overflow: hidden; line-height: 36px; white-space: nowrap; color: #fff;
        text-overflow: ellipsis; -o-text-overflow: ellipsis; -icab-text-overflow: ellipsis; -khtml-text-overflow: ellipsis; -moz-text-overflow: ellipsis; -webkit-text-overflow: ellipsis; }
      .audiojsZ .error-messageZ a { color: #eee; text-decoration: none; padding-bottom: 1px; border-bottom: 1px solid #999; white-space: wrap; }

      .audiojsZ .playZ { background: url('img/player-graphics.gif') -2px -1px no-repeat; }
      .audiojsZ .loadingZ { background: url('img/player-graphics.gif') -2px -31px no-repeat; }
      .audiojsZ .errorZ { background: url('img/player-graphics.gif') -2px -61px no-repeat; }
      .audiojsZ .pauseZ { background: url('img/player-graphics.gif') -2px -91px no-repeat; }

      .playingZ .playZ, .playingZ .loadingZ, .playingZ .errorZ { display: none; }
      .playingZ .pauseZ { display: block; }

      .loadingZ .playZ, .loadingZ .pauseZ, .loadingZ .errorZ { display: none; }
      .loadingZ .loadingZ { display: block; }

      .errorZ .timeZ, .errorZ .playZ, .errorZ .pauseZ, .errorZ .scrubberZ, .errorZ .loadingZ { display: none; }
      .errorZ .errorZ { display: block; }
      .errorZ .play-pauseZ p { cursor: auto; }
      .errorZ .error-messageZ { display: block; }
    </style>
    <div class="audiojsZ">
      <audio src="12345.amr" preload="auto"></audio>
      <div class="play-pauseZ">
        <p class="playZ"></p>
        <p class="pauseZ"></p>
        <p class="loadingZ"></p>
        <p class="errorZ"></p>
      </div>
      
      <div class="error-messageZ"></div>
    </div>

<!--
    <p>Manual player markup (passed into the option object)</p>
    <audio src="http://s3.amazonaws.com/audiojs/04-islands-is-the-limit.mp3" preload="auto"></audio>
-->

  </body>
</html>
